<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('日客层消费分析')" />
</head>
<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-12">
        <!--        <p>ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。 <a href="http://echarts.baidu.com/doc/about.html" target="_blank">了解更多</a>
                </p>
                <p>ECharts官网：<a href="http://echarts.baidu.com/" target="_blank">http://echarts.baidu.com/</a>
                </p>-->
        <div class="row">
            <div class="col-sm-12 ">
                <form id="post-form">
                    <div class="select-list">
                        <ul>

<!--                            <li class="select-time">
                                <label>时间： </label>
                                <input type="text" class="time-input" id="startTime" placeholder="查询时间" name="endTime"/>
                            </li>-->

                            <li class="select-time">
                                <label>时间： </label>
                                <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                                <span>-</span>
                                <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="getData()"><i class="fa fa-search"></i>&nbsp;查询</a>
<!--                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->

                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">

    <!-- 一行两列 -->
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>性别</h5>

                </div>
                <div class="ibox-content">
                    <div style="height: 580px" id="echarts-line-chart"></div>
                </div>
            </div>
        </div>



        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>年龄段</h5>

                </div>
                <div class="ibox-content">
                    <div style="height: 580px" id="echarts-line-chart2"></div>
                </div>
            </div>
        </div>



    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-css" />
<th:block th:include="include :: datetimepicker-js" />
<!--<th:block th:include="include :: echarts-js" />-->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>

<script th:inline="javascript">

    $("#startTime").datetimepicker({
        format:'yyyy-mm-dd',
        autoclose:true,//自动关闭
        minView:2,//最精准的时间选择为日期0-分 1-时 2-日 3-月
        weekStart:0,
        initialDate: new Date()

    });
    $("#startTime").datetimepicker("setDate", new Date());
    $("#endTime").datetimepicker({
        format:'yyyy-mm-dd',
        autoclose:true,//自动关闭
        minView:2,//最精准的时间选择为日期0-分 1-时 2-日 3-月
        weekStart:0,
        initialDate: new Date()

    });
    $("#endTime").datetimepicker("setDate", new Date());


    $(document).ready(getData());
    // $(function () {
    var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
    var lineoption = {
        /*        title: {
                    text: '堆叠区域图'
                },*/
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['男', '女']
        },
        toolbox: {
            // feature: {
            //     saveAsImage: {}
            // }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['0', '1', '2', '3', '4', '5', '6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '男',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '女',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };
    lineChart.setOption(lineoption);
    $(window).resize(lineChart.resize);

    var lineChart2 = echarts.init(document.getElementById("echarts-line-chart2"));
    var lineoption2 = {
        /*        title: {
                    text: '堆叠区域图'
                },*/
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['0~6岁', '7~12岁','13~18岁','19~28岁','29~35岁','36~45岁','46~55岁','56岁以上']
        },
        /*        toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },*/
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['0', '1', '2', '3', '4', '5', '6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '男',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '女',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };


    lineChart2.setOption(lineoption2);
    $(window).resize(lineChart2.resize);



    function getData() {
        var startTime  = $("#startTime").val();
        var endTime = $("#endTime").val();
        var ctx = /*[[@{/}]]*/'/'  ;

        console.log("ctx:" + ctx)
        // 24小时销售 性别
        $.ajax({
            type: 'POST',
            url: ctx +  'baodao/statement/queryAmountCountByGender',
            data: {startTime: startTime,endTime:endTime},
            success: function (result) {
                console.log(result)
                let data1 = [] ; // 男
                let data2 = [] ; // 女
                for( var i in result.data.male){
                    data1.push(result.data.male[i])
                }

                for( var i in result.data.female){
                    data2.push(result.data.female[i])
                }



                console.log("男：" + data1)
                console.log("女：" + data2)

                // 填充数据
                lineChart.setOption({
                    series: [
                        {
                            name: '男',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data1
                        },
                        {
                            name: '女',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data2
                        }
                    ]
                })

            },
            dataType: 'json'
        });
        // 24小时销售 年龄段
        $.ajax({
            type: 'POST',
            url: ctx +  'baodao/statement/queryAmountCountByAge',
            data: {startTime: startTime,endTime:endTime},
            success: function (result) {
                console.log(result)
                let data1 = [] ; //
                let data2 = [] ; //
                let data3 = [] ; //
                let data4 = [] ; //
                let data5 = [] ; //
                let data6 = [] ; //
                let data7 = [] ; //
                let data8 = [] ; //
                for( var i in result.data.one){
                    data1.push(result.data.one[i])
                }

                for( var i in result.data.two){
                    data2.push(result.data.two[i])
                }

                for( var i in result.data.three){
                    data3.push(result.data.three[i])
                }

                for( var i in result.data.four){
                    data4.push(result.data.four[i])
                }

                for( var i in result.data.five){
                    data5.push(result.data.five[i])
                }

                for( var i in result.data.six){
                    data6.push(result.data.six[i])
                }
                for( var i in result.data.seven){
                    data7.push(result.data.seven[i])
                }
                for( var i in result.data.eight){
                    data8.push(result.data.eight[i])
                }



                // console.log("男：" + data1)
                // console.log("女：" + data2)

                // 填充数据
                lineChart2.setOption({
                    series: [
                        {
                            name: '0~6岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data1
                        },
                        {
                            name: '7~12岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data2
                        },
                        {
                            name: '13~18岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data3
                        },
                        {
                            name: '19~28岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data4
                        },
                        {
                            name: '29~35岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data5
                        },
                        {
                            name: '36~45岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data6
                        },{
                            name: '46~55岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data7
                        },
                        {
                            name: '56岁以上',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data8
                        }
                    ]
                })

            },
            dataType: 'json'
        });

    }
</script>
</body>
</html>